<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索栏 -->
    <el-form :inline="true" class="user-search">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="handleEdit()"
        >添加用户</el-button
      >
    </el-form>

    <!-- 添加用户抽屉 -->
    <el-drawer title="添加用户" :visible.sync="drawer" :direction="direction">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="部门">
          <el-input v-model="form.department"></el-input>
        </el-form-item>

        <el-form-item label="日期">
          <el-date-picker
            v-model="form.hiredate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            style="width: 100%"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="身份">
          <template>
            <el-select
              v-model="form.identity"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="width: 100%"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.position"></el-input>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input v-model="form.uid"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userCreated">立即创建</el-button>
          <el-button @click="cancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 编辑用户抽屉 -->
    <el-drawer title="编辑用户" :visible.sync="drawer2" :direction="direction">
      <el-form ref="form" :model="form2" label-width="80px">
        <el-form-item label="部门">
          <el-input v-model="form2.department"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="form2.hiredate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            style="width: 100%"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份">
          <template>
            <el-select
              v-model="form2.identity"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="width: 100%"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form2.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form2.password"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form2.position"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="editUserFunc">确定更改</el-button>
          <el-button @click="cancle2">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 用户展示表格 -->
    <el-table :data="tableData" border style="width: 100%" class="user-list">
      <el-table-column prop="department" label="部门" width="150">
      </el-table-column>
      <el-table-column prop="hiredate" label="雇佣日期" width="100">
      </el-table-column>
      <el-table-column prop="identity" label="身份" width="100">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="password" label="密码" width="250">
      </el-table-column>
      <el-table-column prop="position" label="职位" width="150">
      </el-table-column>
      <el-table-column prop="uid" label="用户id" width="150"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteUser(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="editFunction(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Axios from "axios";
import { baseUrl } from "../../api/axiosFun";
import {
  userAdd,
  userDelete,
  userList,
  userModifyInfo,
} from "../../api/userMG";
export default {
  data() {
    return {
      options: [
        {
          value: "user",
          label: "user",
        },
        {
          value: "admin",
          label: "admin",
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      value2: "",
      // 创建用户
      form: {
        department: "",
        hiredate: "",
        identity: "",
        name: "",
        password: "",
        position: "",
        uid: "",
      },
      // 编辑用户
      form2: {
        department: "",
        hiredate: "",
        identity: "",
        name: "",
        password: "",
        position: "",
        uid: "",
      },
      drawer: false,
      drawer2: false,
      direction: "rtl",
      tableData: [],
    };
  },
  created() {
    this.getAllUser();
  },
  methods: {
    editUserFunc() {
      var data = JSON.stringify(this.form2);
      userModifyInfo(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
          this.getAllUser();
          this.drawer2 = false;
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },

    userCreated() {
      // console.log(this.form)
      var data = this.form;
      console.log(data);
      // var data = JSON.parse(JSON.stringify(this.form))
      // console.log(data)
      userAdd(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.getAllUser();
          this.drawer = false;
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    handleEdit() {
      this.drawer = true;
      (this.form.department = ""),
        (this.form.hiredate = ""),
        (this.form.identity = ""),
        (this.form.name = ""),
        (this.form.password = ""),
        (this.form.position = ""),
        (this.form.uid = "");
    },
    cancle() {
      this.drawer = false;
    },
    cancle2() {
      this.drawer2 = false;
    },
    getAllUser() {
      // 请求方法
      userList()
        .then((res) => {
          // console.log(res)
          this.tableData = res.data;
          console.log(this.tableData);
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("保存失败，请稍后再试！");
        });
    },
    deleteUser(row) {
      let uid = row.uid;
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userDelete(uid)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "用户已删除!",
                });
                this.getAllUser();
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editFunction(row) {
      (this.form2.department = row.department),
        (this.form2.hiredate = row.hiredate),
        (this.form2.identity = row.identity),
        (this.form2.name = row.name),
        (this.form2.password = row.password),
        (this.form2.position = row.position),
        (this.form2.uid = row.uid),
        (this.drawer2 = true);
    },
  },
};
</script>


<style scoped>
.user-search {
  margin-top: 25px;
}

.user-list {
  margin-top: 30px;
}
</style>
